import h from "./snabbdom/h"
import patch from "./snabbdom/patch"

/*
    情况：
    1、新旧节点都有text属性；
    2、旧节点有text属性，但是新节点有children；
    3、旧节点有children，但是新节点有text属性；
    4、新旧节点都是有children
*/

// 情况一 新旧节点都有text属性
// const vnode1 = h("p", {}, "旧节点");
// const vnode2 = h("p", {}, "新节点");

// 情况二 旧节点有text属性，但是新节点有children
const vnode1 = h("section", {}, "旧节点");
const vnode2 = h("section", {}, [
    h("span", {}, "新节点1"),
    h("span", {}, "新节点2"),
    h("span", {}, "新节点3"),
])

// 情况三 旧节点有children，但是新节点有text属性
// const vnode1 = h("section", {}, [
//     h("span", {}, "新节点1"),
//     h("span", {}, "新节点2"),
//     h("span", {}, "新节点3"),
// ])
// const vnode2 = h("section", {}, "旧节点");

// 情况四 新旧节点都是有children
// const vnode1 = h("ul", {}, [
//     h("li", {
//         key: "A"
//     }, "新节点1"),
//     h("li", {
//         key: "B"
//     }, "新节点2"),
//     h("li", {
//         key: "C"
//     }, "新节点3"),
// ]);
// const vnode2 = h("ul", {}, [
//     h("li", {
//         key: "A"
//     }, "新节点1"),
//     h("li", {
//         key: "B"
//     }, "新节点2"),
//     h("li", {
//         key: "M"
//     }, "新节点M"),
//     h("li", {
//         key: "N"
//     }, "新节点N"),
//     h("li", {
//         key: "C"
//     }, "新节点3"),
//     h("li", {
//         key: "P"
//     }, "新节点P"),
// ]);


const container = document.getElementById("container");
const btn = document.getElementById("btn");

patch(container, vnode1);

btn.onclick = function () {
    patch(vnode1, vnode2);
}